<template>
    <div class="loan-info-box">
        <x-header slot="header"
                  style="width:100%;height:46px;background-color: #ec6758"
                  title="分享详情"
                  :left-options="{backText: '', preventGoBack:true}"
                  @on-click-back="goBackPage"
        ></x-header>

        <div class="list_liebiao">
            <h4 v-text="title"></h4>
            <div>
                <span>分享人：<span v-text="shareName"></span></span>
                <span>时间:<span v-text="formatDateTime(modifyTime)"></span></span>
            </div>

            <p v-html="context" style="display: block">
            </p>
        </div>
        <div v-for="item in attach" style="margin-top: 1rem">
            <a class="lianjie" :href="item.fullPath" v-text="item.name" style="font-size: 14px"></a>
        </div>


    </div>
</template>

<script>
    /**
     *
     *   我是分享详情页
     */
    import {
        XHeader,
        dateFormat
    } from 'vux';

    import SysApi from '../../api/api'

    export default {
        name: 'shareDetail',
        data() {
            return {
                activePageItem: 0, // 激活当前页
                isLastStep: false, // 是否是最后一步
                attach: [],
                context: '',
                modifyTime: '',
                resume: '',
                title: '',
                shareName: ''
            };
        },
        methods: {
            formatDateTime(date) {
                return dateFormat(date, 'YYYY-MM-DD HH:mm')
            },
            downloadFile(file) {
                let $a = document.createElement('a');
                $a.setAttribute('href', file.fullPath);
                $a.setAttribute('download', file.name);
                let event = new MouseEvent('click');
                $a.dispatchEvent(event);
            },

            init() {
                let _this = this;
                let data = {
                    id: this.$route.query.id
                };
                SysApi.shareinfo(data).then(
                    res => {
                        console.log(res)
                        this.context = res.data.context;
                        this.modifyTime = res.data.modifyTime;
                        this.resume = res.data.resume;
                        this.shareName = res.data.shareName;
                        this.title = res.data.title;
                        if (res.data.attach && res.data.attach.length) {
                            res.data.attach = JSON.parse(res.data.attach)
                        }
                        this.attach = res.data.attach;
                    }, error => {

                    }
                )
            },

            goBackPage() {
                // 如果是第一步的话，那么返回到上一个页面
                this.$router.push({name:"index/shareList"});
            },
        },
        activated: function () {
            this.init();
        },
        components: {
            XHeader,
            dateFormat
        }
    };

</script>

<style lang="less">
    @import "../../style/theme.less";
    @import "../../style/mixin.less";

    .loan-info-box {
        background-color: @color-background-default;

        .vux-header {
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            .vux-header-left {
                .left-arrow:before {
                    border: solid 1px @color-white;
                    border-width: 2px 0 0 2px;
                }
            }
        }
        .progressState div p {
            font-size: @font-size-tiny;
        }
        .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            top: -1px;
            padding-top: 1px;
        }
        .currentStep .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            padding-top: 1px;
            border: 1px solid @color-primary;
            color: @color-primary;
            border-radius: 50%;
            background-color: @color-white;
        }
        .weui-input {
            height: 28px;
            line-height: 28px;
        }
        .weui-wepay-flow, .weui-wepay-flow-auto {
            padding: 10px 40px 30px;
            background: @color-white;
        }
        .weui-wepay-flow__li_done .weui-wepay-flow__state,
        .weui-wepay-flow__process {
            background-color: @color-primary;
        }
    }

    .vux-search-fixed {
        position: static !important;
    }

    .weui-search-bar__cancel-btn {
        color: #000000;
    }

    .list_liebiao {
        padding: 1rem 1rem 1rem 1rem;
        background: @color-white;
        h4 {
            font-size: @font-size-primary;
            font-weight: normal;
            padding-bottom: 0.3rem;
        }
        div span {
            display: inline-block;
            font-size: @font-size-medium;
            padding-bottom: 0.3rem;
            color: #999;
        }
        div > span:last-child {
            padding-left: 1rem;
        }
        p {
            font-size: @font-size-medium;

        }
    }

    .lianjie {
        padding: 1rem;
    }

</style>
